<?php

?>
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" charset="UTF-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
   		<div class="col-xs-5">
       <nav class="navbar navbar-default">
     	<div class="row">
     	<div class="col-xs-8">
     	<form action="#" class="navbar-form">
     				<div class="input-group">
     					<input class="form-control" name="text" placeholder="搜索"/>
     					<div class="input-group-btn">
							<button type="submit" class="btn btn-default">
									<span class="glyphicon glyphicon-search"></span>
									</button>
									</div>
									</div>
									</form>
									</div>
									<ul class="nav navbar-nav">
									<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-th-list"></span>&nbsp;通讯录 <span class="caret"></span></a>
									<ul class="dropdown-menu">
									<li><a href="user.php">添加</a></li>
									<li><a href="main.php">列表</a></li>
									</ul>
									</li>
									</ul>

									</div>
									</nav>
									<div class="panel panel-default">
		<div class="panel-heading">
			<div class="panel-title">编辑李小小</div>
			</div>
			<div class="panel-body">
			<form class="form-horizontal">
				<div class="form-group">
					<label class="col-xs-3 control-label">姓名</label>
					<div class="col-xs-8">
					<input class="form-control" placeholder="李小小"/>
					</div>
					</div>
					<div class="form-group">
					<label class="col-xs-3 control-label">手机</label>
					<div class="col-xs-8">
						<div class="input-group">
							<input class="form-control" placeholder="1392141432"/>
							<div class="input-group-btn">
								<a class="btn btn-default" data-toggle="modal" data-target="#p">删除</a>
										</div>
										</div>
										</div>
										</div>
										<div class="form-group">
										<label class="col-xs-3 control-label">QQ</label>
										<div class="col-xs-8">
										<div class="input-group">
										<input class="form-control" placeholder="1769165711"/>
							<div class="input-group-btn">
								<a class="btn btn-default" data-toggle="modal" data-target="#q">删除</a>
								</div>
								</div>
								</div>
								</div>

										<div class="form-group">
					<label class="col-xs-3 control-label">添加</label>
					<div class="col-xs-8">
			
							<a class="btn btn-default" data-toggle="modal" data-target="#s"><span class="glyphicon glyphicon-plus"></span></a>

							</div>
							</div>

							<div class="form-group">
					<label class="col-xs-3 control-label"></label>
					<div class="col-xs-8">
							<button class="btn btn-primary">确定</button>
							<button class="btn btn-default">取消</button>
							</div>
							</div>
							</form>

							</div>
							</div>
							</div>
							</div>
							<div id="p" class="modal">
		     <div class="modal-dialog">
		     <div class="modal-content">
		     <div class="modal-header">
		     <span class="close" data-dismiss="modal">&times;</span>
		     <div class="modal-title">删除确认</div>
		     </div>
		     <div class="modal-body">
		     确认删除手机号：1392141432？
		     </div>
		     <div class="modal-footer">
		     <button class="btn btn-primary">确定</button>
		     <button class="btn btn-primary" data-dismiss="modal">取消</button>
		     </div>
		     </div>
		     </div>
		     </div>
		     <div id="q" class="modal">
		     <div class="modal-dialog">
		     <div class="modal-content">
		     <div class="modal-header">
		     <span class="close" data-dismiss="modal">&times;</span>
		     <div class="modal-title">删除确认</div>
		     </div>
		     <div class="modal-body">
		     确认删除QQ号：1769165711？
		     </div>
		     <div class="modal-footer">
		     <button class="btn btn-primary">确定</button>
		     <button class="btn btn-primary" data-dismiss="modal">取消</button>
		     </div>
		     </div>
		     </div>
		     </div>
		     <div id="s" class="modal">
		     <div class="modal-dialog">
		     <div class="modal-content">
		     <div class="modal-header">
		     <span class="close" data-dismiss="modal">&times;</span>
		     <div class="modal-title">添加条目</div>
		     </div>
		     <div class="modal-body">
		     <form class="form-horizontal">
		     <div class="form-group">
		     <label class="col-xs-3 control-label">类型</label>
		     <div class="col-xs-8">

		     <select>
		     <option selected="selected">手机号</option>
		     <option>QQ号</option>
		     </select>

		     </div>
		     </div>
		     <div class="form-group">
		     <label class="col-xs-3 control-label">内容</label>
		     <div class="col-xs-8">
		     <input class="form-control" />
		     </div>
		     </div>
		     </form>
		     </div>
		     <div class="modal-footer">
		     		<button class="btn btn-primary">确定</button>
		     				<button class="btn btn-primary" data-dismiss="modal">取消</button>
		     				</div>
		     				</div>
		     </div>
		 </div>
   </body>
</html>